<template>
  <systemDialog :title="dailog.title" :width="dailog.width" :height="dailog.height" :visible="dailog.visible" @onClose="onClose" @onConfirm="confirm">
    <template v-slot:content>
        <el-form :model="formData" ref="formDataRef" :rules="rules" label-width="80px" :inline="false" size="small">
            <el-row>
                <el-col :span="24">
                    <el-form-item label="菜单类型" prop="type">
                        <el-radio-group v-model="formData.type">
                            <el-radio :label="'0'">目录</el-radio>
                            <el-radio :label="'1'">菜单</el-radio>
                            <el-radio :label="'2'">按钮</el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="上级菜单" prop="parentName">
                        <el-input type="hidden" v-model="formData.parentId"></el-input>
                        <el-input v-model="formData.parentName" @click="selectParent"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单名称" prop="label">
                        <el-input v-model="formData.label"></el-input>
                    </el-form-item>
                </el-col>
                <el-col v-if="formData.type !== '2'" :span="12">
                <!-- 一级是目录，二级是菜单 -->
                    <el-form-item label="菜单图标" prop="icon">
                        <el-input v-model="formData.icon"></el-input>
                    </el-form-item>
                </el-col>
                <el-col v-if="formData.type === '1'" :span="12">
                    <el-form-item label="路由名称" prop="name">
                        <el-input v-model="formData.name"></el-input>
                    </el-form-item>
                </el-col>
                <el-col v-if="formData.type === '1'" :span="12">
                    <el-form-item label="路由地址" prop="path">
                        <el-input v-model="formData.path"></el-input>
                    </el-form-item>
                </el-col>
                <el-col v-if="formData.type === '1'" :span="12">
                    <el-form-item label="组件路径" prop="url">
                        <el-input v-model="formData.url"></el-input>
                    </el-form-item>
                </el-col>
                    <el-col :span="12">
                    <el-form-item label="权限字段" prop="code">
                        <el-input v-model="formData.code"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="菜单序号" prop="orderNum">
                        <el-input v-model="formData.orderNum"></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
    </template>
  </systemDialog>
  <!-- 上级部门弹窗 -->
  <menuParent ref="parentRef" @select="select"></menuParent>
</template>
<script setup lang='ts'>
import { ref,reactive} from 'vue'
import systemDialog from '@/components/systemDialog.vue';
import userDialog from '@/hooks/userDialog';
import addMenu from '@/composables/menu/addMenu'
import userSelectParent from '@/composables/department/userSelectParent'
import menuParent from './menuParent.vue';

// 弹框属性
const { dailog, onClose, onShow } = userDialog()

const emit = defineEmits(['save'])

// 新增/编辑弹框方法
const { confirm, show111, formData, rules, formDataRef, select} = addMenu(dailog,onShow,onClose,emit)

// 暴露方法给外部使用
// 父组件（RoleList.vue）调用子组件（addRole.vue）显示弹窗
// tableCurd.ts里的 const addRef = ref<{ show:(type:string,row?:AddUserModel) => void }>()
defineExpose({
    show111
})

// 上级部门 
// 点击触发<el-input v-model="dialogModel.parentName" @click="selectParent"></el-input>，设置dailog属性
const { parentRef, selectParent } = userSelectParent()

</script>
<style scoped lang='scss'>
</style>